<template>
	<view>
		<view class="page">
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft">
					<view class="flex-item">一键交班</view>
				</uni-nav-bar>
			</view>
			<view>
				<view class="content">
					<!-- v-if="conten" -->
					<view v-if="showThis">
						<view class="conter-header">值班时段</view>
						<view class="conter-information">
							<radio-group name="radio" @change="radioChange">
								<label class="label-left" v-for="(item, index) in listParam" :key="index">
									<radio :value="item" :checked="item.checked" />
									<text>{{ item.dutyPeriodText }}</text>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="conter-header">交接内容</view>
					<view class="conter-information new-inf" v-model="content">
						<textarea placeholder="请输入交接内容" maxlength="500" v-model="content"></textarea>
					</view>
					<view class="conter-header">备注</view>
					<view class="conter-information"><textarea placeholder="请输入备注信息" maxlength="500" v-model="remark"></textarea></view>
				</view>
				<view class="duty-sure" @click="clickHand('formValue')">确认交班</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import tools from '@/common/tools-new.js';
export default {
	components: {
		uniNavBar,
		uniIcon
	},
	data() {
		return {
			// dutyPeriodValue: '', //当前值班时段
			// DutyRowGuid: '', //排班表唯一标识
			DutyPersonRowGuid: '', //值班人唯一标识
			// content: '', //交接内容
			// remark: '', //备注
			listParam: [],
			dic_data: [
				{
					name: '值班时段',
					data: []
				}
			],

			listObj: {
				DutyPeriodValue: '', //当前值班时段
				DutyRowGuid: '', //排班表唯一标识
				DutyPersonRowGuid: '', //值班人唯一标识
				Content: '', //内容
				Remark: '' //备注
			},
			target: '',
			showThis: true
		};
	},

	methods: {
		clickHand() {
			this.$api.Succeed.NewShift(this.listObj).then(res => {
				// console.log(res[1].data.result);
				const value = uni.getStorageSync('userid');
				if (value) {
					console.log(value);
					this.DutyPersonRowGuid = value; //值班人唯一标识
					console.log(this.DutyPersonRowGuid);
					var statuscode = res[1].statusCode;
					if (statuscode == 200) {
						uni.showToast({
							title: '交班成功',
							duration: 2000,
							// url:'../../project-maintenance/duty-manage/duty-preview'
						});
					} else {
						uni.showToast({
							title: '交班失败',
							duration: 2000
						});
					}
				}
				
			});
		},

		radioChange(e) {
			console.log('radio发生change时间时，携带value值为: ', e.target.value);
			if (e.target.value) {
				this.listObj.DutyRowGuid = e.target.value.dutyRowGuid;
				this.listObj.DutyPeriodValue = e.target.value.dutyPeriodValue;
			}
			console.log(this.listObj);
		},

		//值班时段
		getTimeChoose() {
			let duty = { DutyPersonRowGuid: this.DutyPersonRowGuid };
			this.$api.Succeed.GetCall(duty).then(res => {
				// console.log(JSON.stringify(res));
				this.listParam = res[1].data.result;
				if (this.DutyPersonRowGuid == '') {
					this.showThis = false;
				} else {
					this.listParam = res[1].data.result;
					this.showThis = true;
				}
			});
		},

		clickRadio(params) {
			alert(params);
		},

		//点击箭头返回父页面
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	},

	onLoad: function() {
		this.getTimeChoose();
		this.radioChange();
	},

	onNavigationBarButtonTap: function(e) {
		console.log(JSON.stringify(e));
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
}

.uni-navbar__header-btns {
	padding: 0;
}

.uni-navbar__header-btns:last-child {
	width: 120px;
}

.flex-item {
	font-size: 20px;
	text-align: center;
}

.uni-icon {
	padding-left: 42%;
}

.content {
	width: 94%;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 16px;
	overflow: hidden;
	padding-bottom: 47px;
	border-radius: 3px;
}

.conter-header {
	width: 94%;
	font-size: 16px;
	margin: 0 auto;
	margin-top: 15px;
	color: #333333;
}

.conter-information {
	width: 94%;
	border: 1px solid #e5e5e5;
	margin: 0 auto;
	margin-top: 10px;
}

.new-inf {
	overflow: auto;
}

.conter-information {
	font-size: 15px;
	color: #666666;
	padding-bottom: 88px;
}

.conter-information view {
	margin-top: 11px;
	margin-left: 12px;
}

.conter-information textarea {
	width: 94%;
	margin: 0 auto;
	padding: 0;
	font-size: 14px;
	color: #666666;
	margin-top: 15px;
}

.duty-sure {
	width: 94%;
	height: 52px;
	margin: 0 auto;
	font-size: 16px;
	background-color: #458cd0;
	border-radius: 3px;
	margin-top: 24px;
	text-align: center;
	line-height: 52px;
	color: #ffffff;
}

uni-radio-group {
	width: 40%;
}

uni-radio {
	margin-top: 12px;
}

.label-left {
	margin-left: 12px;
}
</style>
